<template>
  <div class="flex min-h-full justify-center items-center my-4">
    <ZTabs
      class="flex p-2"
      tab-class="flex-1"
      content-class="bg-base-100 mt-2"
      visual="box"
      :tabs="tabs"
    >
      <template #profile>
        <ZCard>
          <h3 class="text-xl font-bold">个人信息管理</h3>
          <p class="text-sm text-neutral-400">更新你的个人和学生信息</p>
          <ProfileForm />
        </ZCard>
      </template>
      <template #settings>
        <ZCard>
          <h3 class="text-xl font-bold">设置</h3>
          <p class="text-sm text-neutral-400">更新你的账户和偏好设置</p>
          <ZCard visual="border">
            <h4 class="text-lg">改变密码</h4>
            <PasswordForm />
          </ZCard>
          <ZCard visual="border">
            <h4 class="text-lg">偏好设置</h4>
            <label class="label">主题设置</label>
            <SwitchTheme />
          </ZCard>
        </ZCard>
      </template>
    </ZTabs>
  </div>
</template>
<script setup lang="ts">
import ZTabs, { type TabItem } from "@/components/ui/ZTabs.vue";
import ZCard from "@/components/ui/ZCard.vue";

import ProfileForm from "./components/ProfileForm.vue";
import PasswordForm from "./components/PasswordForm.vue";
import SwitchTheme from "./components/SwitchTheme.vue";

const tabs: TabItem[] = [
  {
    label: "个人信息",
    name: "profile",
  },
  {
    label: "设置",
    name: "settings",
  },
];
</script>
